<template>
  <t-space direction="vertical">
    <div class="min-h serveProject bg-wt">
      <div class="baseList">
        <div class="tableBoxs">
          <!-- 当数据为空需要占位时，会显示 cellEmptyContent -->
          <t-table  
          row-key="index" 
          :data="data" 
          :columns="COLUMNS" 
          vertical-align="middle"
          :hover="hover"
          tabel-content-width="100%"
          table-layout="fixed">
            <template #rowIndex="{ rowIndex }">{{ rowIndex + 1 }}</template>
            <template #price="{ row }"> {{ isDecimals(row.price) ? row.price : row.price + '.00' }} </template>
            <template #image="{ row }">
              <div>
                <div class="tdesign-demo-image-viewer__base">
                  <t-image-viewer :images="[row.image]">
                    <template #trigger="{ open }">
                      <div class="tdesign-demo-image-viewer__ui-image">
                        <img alt="test" :src="row.image" class="tdesign-demo-image-viewer__ui-image--img" />
                        <div class="tdesign-demo-image-viewer__ui-image--hover" @click="open">
                          <span>
                            <BrowseIcon size="1.4em" /> 预览
                          </span>
                        </div>
                      </div>
                    </template>
                  </t-image-viewer>
                </div>
              </div>
            </template>
            <template #gender="{ row }">{{ row.gender == 1 ? '男' : '女' }}</template>
            <template #op="{ row }">
              <div class="operateCon">
      <t-link theme="danger" hover="underline"> 删除 </t-link>
      <t-link theme="success" hover="underline"> 编辑 </t-link>
      <t-link theme="danger" hover="underline"> 禁用 </t-link>
      </div>
    </template>
          </t-table>
        </div>
      </div>
    </div>

 
    
  </t-space>

  <t-pagination 
  v-model="pagination.pageNum" 
  v-model:pageSize="pagination.pageSize" 
  :total="pagination.total"
    @change="onChange" />

</template>

<script lang="tsx" setup>
import { ref, onMounted } from 'vue';
import { COLUMNS } from "./constants";
import { getProjectList } from '@/api/serve';


const data = ref([]);
const total = ref();
const hover = ref(false);



onMounted(() => {
  getList();
});

const getList = async () => {
  const res = await getProjectList({
    pageNum: pagination.value.pageNum,
    pageSize: pagination.value.pageSize,
  });
  console.log("返回数据",res);
  data.value = res.data.records;
  total.value = res.data.total;
};

//价格判断
const isDecimals = (num: number): boolean => {
  return num % 1 != 0;
}

const pagination = ref({
  pageNum: 1,
  pageSize: 10,
  total: total,
});

//分页查询

const onChange = (pageInfo) => {
  console.log(pageInfo);
  pagination.value.pageNum = pageInfo.current;
  pagination.value.pageSize = pageInfo.pageSize;
  getList();
};


</script>
<style scoped>
.tdesign-demo-image-viewer__ui-image {
  width: 100%;
  height: 100%;
  display: inline-flex;
  position: relative;
  justify-content: center;
  align-items: center;
  border-radius: var(--td-radius-small);
  overflow: hidden;
}

.tdesign-demo-image-viewer__ui-image--hover {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.6);
  color: var(--td-text-color-anti);
  line-height: 22px;
  transition: 0.2s;
}

.tdesign-demo-image-viewer__ui-image:hover .tdesign-demo-image-viewer__ui-image--hover {
  opacity: 1;
  cursor: pointer;
}

.tdesign-demo-image-viewer__ui-image--img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  cursor: pointer;
  position: absolute;
}

.tdesign-demo-image-viewer__ui-image--footer {
  padding: 0 16px;
  height: 56px;
  width: 100%;
  line-height: 56px;
  font-size: 16px;
  position: absolute;
  bottom: 0;
  color: var(--td-text-color-anti);
  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
  display: flex;
  box-sizing: border-box;
}

.tdesign-demo-image-viewer__ui-image--title {
  flex: 1;
}

.tdesign-demo-popup__reference {
  margin-left: 16px;
}

.tdesign-demo-image-viewer__ui-image--icons .tdesign-demo-icon {
  cursor: pointer;
}

.tdesign-demo-image-viewer__base {
  width: 60px;
  height: 60px;
  margin: 5px;
  border: 4px solid var(--td-bg-color-secondarycontainer);
  border-radius: var(--td-radius-medium);
}
</style>